<!doctype html>
<html lang="en">
<head>
	<meta charset="UTF-8" />
	<title></title>
</head>
<style>
	*{
		margin: 0;
		padding: 0;
	}
	.old{
		width: 300px;
		height: 300px;
		border: 1px solid gainsboro;
		margin: 100px auto;
	}
	.box{
		overflow: hidden;
	}
	.box input{
		float: left;
		width: 100px;
		height: 30px;
	}
	.active{
		background: lightseagreen;
		color: #fff;
	}
	ul{
		width: 300px;
		height: 270px;
	}
	 ul li{
		width: 300px;
		height: 270px;
		background: thistle;
		font-size: 55px;
		text-align: center;
		line-height: 270px;
		display: none;
		color: white;
	}
	.show{
		display: block;
	}
	#old3 .box button{
		float: left;
		width: 60px;
		height: 30px;
	}
	#old3 .box input{
		float: left;
		width: 60px;
	}
</style>
<body>
	<div class="old" id="old1">
		<div class="box">
			<input type="button" value="1" class="active" />
			<input type="button" value="2" />
			<input type="button" value="3" />
		</div>
		<ul>
			<li class="show">1</li>
			<li>2</li>
			<li>3</li>
		</ul>
	</div>
	<div class="old" id="old2">
		<div class="box">
			<input type="button" value="1" class="active" />
			<input type="button" value="2" />
			<input type="button" value="3" />
		</div>
		<ul>
			<li class="show">1</li>
			<li>2</li>
			<li>3</li>
		</ul>
	</div>
	
</body>
<script type="text/javascript">
//	window.onload = function(){
//		var aBtn = document.querySelectorAll('.box input');
//		var aLi = document.querySelectorAll('.old li');
//		for(let i=0 ; i<aBtn.length ; i++){
//			aBtn[i].onclick = function(){
//				for(var j=0 ; j<aLi.length ; j++){
//					aBtn[j].className = '';
//					aLi[j].className = '';
//				}
//				aLi[i].className = 'show';
//				this.className='active';
//			}
//		}
//	}
	class Tab{
		constructor(str){
			//属性
			this.parent=document.querySelector(str);
			this.aBtnList=this.parent.querySelectorAll('input');
			this.aLiList=this.parent.querySelectorAll('li');
			//初始化事件
			this.show();
		}
		show(){
			let _this=this;
			for(let i=0; i<this.aBtnList.length;i++){
				this.aBtnList[i].onclick=function(){
					_this.index=i;
					_this.fn(i);	
				};
			}		
		}
		fn(i){
			for(var j=0;j<this.aLiList.length;j++){
				this.aBtnList[j].className='';
				this.aLiList[j].className='';
			}
			this.aLiList[i].className='show';
			this.aBtnList[i].className='active';		
		}
	}
	
	class AutoPlayTab extends Tab{
		constructor(str){
			//继承属性
			super(str);
			this.autoFn();
			this.index=0;
		}
		autoFn(){
			var _this=this;
			setInterval(function(){
					_this.index++
					if(_this.index==_this.aBtnList.length){	
						_this.index=0;								
					}
					_this.fn(_this.index);
			},2000);	
		}
	}
	window.onload=function(){
		new Tab('#old1');
		new AutoPlayTab('#old2');
	}
</script>
</html>